<template>
  <div class="loginbox" id="app">
    <h2>登录</h2>
    <form action=" " method="post" ref="loginForm" name="loginForm">
      <div class="item">
        <input type="" name="username" required>
        <label for="">用户名/邮箱</label>
      </div>
      <div class="item">
        <input type="password" name="password" required>
        <label for="">密码</label>
      </div>
      <input class="btn" type=button @click="login" value="登录">
      <a href="register.html" button class="btn">注册</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button class="btn">忘记密码？</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      // this.$refs.loginFormRef.validate(async valid => {
      // eslint-disable-next-line no-unused-expressions
      async valid => {
        if (!valid) return
        const {data: res} = await this.$http.post('/login', this.loginForm)
        console.log(res).then(function(err) { console.log(err) })
        if (res.code !== 200) return this.$message.error('登录失败！')
        this.$message.success('登陆成功')
      }
      // });
    }
  }
}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    cursor: default;
  }

  a {
    text-decoration: none;
  }

  input,
  button {
    background: transparent;
    border: none;
    /*outline:none;*/
  }

  body {
    height: 100vh;
    background: linear-gradient(#141e30, #243b55);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #03e9f4;
  }

  .loginbox {
    width: 400px;
    height: 330px;
    background: rgb(0, 0, 0, 0.5);
    box-shadow: 0px 15px 25px 0 rgba(0, 0, 0, 0.6);
    padding: 30px;
    box-sizing: border-box;

  }

  h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
  }

  .item {
    height: 45px;
    border-bottom: 1px solid #fff;
    margin-bottom: 30px;
    position: relative;

  }

  .item input {
    width: 100%;
    height: 100%;
    color: white;
    padding-top: 20px;
    box-sizing: border-box;
    cursor: text;
  }

  .item input:hover+label,
  .item input:valid+label {
    top: 0px;
    font-size: 12px;
  }

  .item label {
    position: absolute;
    left: 0;
    top: 12px;
    transition: all 0.2s;
  }

  .btn {
    padding: 10px 20px;
    font-size: 15px;
    overflow: hidden;
    margin-top: 30px;
    color: #03e9f4;
    cursor: pointer;
    position: relative;
    transition: 200ms all;
  }

  .btn:hover {
    background: #03e9f4;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0 0 5px 0 #03e9f4,
      0 0 25px 0 #03e9f4,
      0 0 50px 0 #03e9f4,
      0 0 100px 0 #03e9f4, ;
  }

</style>
